<template>
  <div class="addinventory">
      <el-row :gutter="16" class="top-add">
        <el-col :span="18">
          <div>
              <el-page-header @back="backOutStore" content="新增盘点单"></el-page-header>
            </div>
        </el-col>
        <el-col :span="6">
          <el-dropdown style="margin-right:10px" trigger="click">
            <el-button size="mini" type="primary">盘点范围</el-button>
            <el-dropdown-menu class="inventory-area" slot="dropdown">
              <el-dropdown-item @click.native="selectArea">选择仓库范围</el-dropdown-item>
              <el-dropdown-item @click.native="selectInventProd">选择装备范围</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
            
          <el-button size="mini" type="primary" @click="saveInventory">保存</el-button>
          <!-- <el-button size="mini" type="primary" @click="backOutStore">取消</el-button> -->
        </el-col>
      </el-row>

      <el-row :gutter="16" style="line-height:40px;margin-top:-20px;margin-bottom:20px">
        <el-col :span="4">
          <div class="">
            <label for="">盘点单号</label>
            <el-input v-model="checkCode" size="small" disabled placeholder="可自动生成" style="width:80%"></el-input>
          </div>
        </el-col>

         <el-col :span="4">
          <div>
            <label for="">盘点人</label>
            <div class="main-content">
              <el-select v-model="userId" placeholder="请选择" style="width:80%"  size="small">
                <el-option
                  v-for="item in staffList"
                  :key="item.staffId"
                  :label="item.staffName"
                  :value="item.staffId">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="">
            <label for="">制单人</label>
            <div>
              <el-input v-model="checkPerson" size="small" style="width:80%"></el-input>
            </div>
          </div> 
        </el-col>
        <el-col :span="4">
          <div class="">
            <label for="">盘点日期</label>
            <div>
              <el-date-picker  style="width:80%" size="small" 
                type="date" placeholder="选择日期" 
                v-model="checkDate">
              </el-date-picker>
            </div>
          </div> 
        </el-col>

        <el-col :span="4">
          <div class="">
            <label for="">截止日期</label>
            <div>
              <el-date-picker  style="width:80%" size="small" 
                type="date" placeholder="选择日期" 
                v-model="closeDate">
              </el-date-picker>
            </div>
          </div> 
        </el-col>

        <el-col :span="4">
            <label for="">备注</label>
            <el-input v-model="checkRemark" size="small" placeholder="" style="width:90%"></el-input>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="inventoryProd" border style="width: 100%">
            <!-- <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column>
            <el-table-column prop="prodName" label="装备名称" width="120"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格" width="80"></el-table-column>
            <el-table-column prop="prodStocknum" label="库存数"></el-table-column>
            <el-table-column prop="emit" label="单位"></el-table-column>
            <!-- <el-table-column prop="prodPrice" label="价格"></el-table-column> -->
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" @click="delSelectProd(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <selectarea :openSelectArea.sync="openSelectArea"></selectarea>
      <selectstock :selectprodDialog.sync="selectprodDialog"></selectstock>
  </div>
</template>

<script>
import { InventoryStore, FindInventoryById, UpdateInventory } from '@/api/inventory';
import selectarea from './selectarea';
import selectstock from '@/components/selectStock';
export default {
  name: 'addallot',
  components: {
    selectarea,
    selectstock
  },
  data() {
    return {
        isSelectWare: true,
        openSelectArea: false, // 打开选择仓库
        selectprodDialog: false, // 打开选择装备
        is_search: false,
        // 盘点单数据
        checkCode: '',
        userId: null,
        checkPerson: '',
        checkDate: new Date(),
        closeDate: '',
        checkRemark: '',
        checkId: null,
        // 盘点选择的装备
        newSelect: [],
        inventoryProd: [
           
        ],
        staffList: [
          { staffId: 1, staffName: 'admin'},
        ],
    }
    
  },
  mounted() {
    this.checkId = this.$route.query.checkId;
    if (this.checkId) {
      FindInventoryById(this.checkId).then( res => {
        let orderDetail = res.data[0];
        orderDetail.checkDate = this.formatDate(orderDetail.checkDate);
        this.checkCode = orderDetail.checkCode;
        this.checkDate = orderDetail.checkDate;
        this.closeDate = orderDetail.closeDate;
        this.checkPerson = orderDetail.checkPerson;
        this.checkRemark = orderDetail.checkRemark;
        this.userId = orderDetail.userId;
        if (orderDetail.corderPutProds && orderDetail.corderPutProds.length != 0) {
          this.inventoryProd = orderDetail.corderPutProds;
          for( let n = 0; n < this.inventoryProd.length; n++) {        
            this.inventoryProd[n].edit_id = n + 1;
          }
        }  
      })
    }    
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
    getSelectprod() {
      return this.$store.state.ware.selectProds;
    },
    getStockprod() {
      return this.$store.state.ware.stockProds;
    },
  },
   watch: {
     getStockprod(newVal) {
       if (this.isSelectWare) {
         let stocklist = newVal;
        this.inventoryProd = JSON.parse(JSON.stringify(stocklist));
       }
     },
     openSelectArea(newVal) {
      if (!newVal) {
        this.isSelectWare = true;
      }
    },
    selectprodDialog(newVal) {
      if (!newVal) {
        let newArr = this.inventoryProd.concat(this.getSelectprod);
        this.newSelect = JSON.parse(JSON.stringify(newArr));
        // 去除里面重复的商品
        this.inventoryProd = this.newSelect.filter((item, index, origin) => 
          index === origin.findIndex(itemInner => {
            return itemInner.stockId === item.stockId
          }
        ))
        this.isSelectWare = false;
      }
    }
  },

  methods:{
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {

    },
    // 打开选择仓库盘点范围
    selectArea() {
      this.openSelectArea = true;
    },
    // 选择装备盘点
    selectInventProd() {
      this.selectprodDialog = true;
      if (this.isSelectWare) {
        this.inventoryProd = []
      }
    },
    backOutStore() {
        this.$router.push('/inventory')
    },
    delSelectProd(el) {
      this.inventoryProd = this.inventoryProd.filter( e => e.stockId != el.stockId);
    },
    // 保存
    saveInventory() {
      this.checkDate = this.formatDate(this.checkDate);
      this.closeDate = this.formatDate(this.closeDate);
      if (this.checkId) {
        // 存在即修改
        let reqData = {
            checkCode: this.checkCode,
            checkId: this.checkId,
            checkDate: this.checkDate,
            closeDate: this.closeDate,
            checkPerson: this.checkPerson,
            userId: this.userId,
            checkRemark: this.checkRemark,
            corderPutProds: this.inventoryProd,
        }
        // console.log(reqData)
        UpdateInventory(reqData).then( res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push('/inventory')
          }, 1000)
        }).catch( error => console.log(error))

      } else {
        // 不存在即新增
          let reqData = {
            checkCode: this.checkCode,
            checkDate: this.checkDate,
            closeDate: this.closeDate,
            checkPerson: this.checkPerson,
            userId: this.userId,
            checkRemark: this.checkRemark,
            corderPutProds: this.inventoryProd,
          }
          // console.log(reqData)
          InventoryStore(reqData).then( res => {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push('/inventory')
            }, 1000)
          }).catch( error => console.log(error))
      }
    }
  },

}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    // font-weight: 700;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
  }
</style>
  
